<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/ecmascript" src="../../js/jquery.min.js"></script>    
    <script type="text/ecmascript" src="../../js/trirand/jquery.jqGrid.min.js"></script>
    <script type="text/ecmascript" src="../../js/trirand/i18n/grid.locale-en.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/trirand/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Pivot Searching</title>
</head>
<body>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 
    
        jQuery(document).ready(function () {

            jQuery("#jqGrid").jqGrid('jqPivot',
            "data.json",
            // pivot options
            {
                xDimension: [
                    { dataName: "CategoryName" },
                    { dataName: "ProductName" }
                ],
                groupSummaryPos: "footer",
                aggregates: [
                    { 
                        formatter: "number",
                        label: "Sum Price",
						sorttype: 'number',
                        width: 80,
                        align: "right",
                        aggregator: "sum",
                        summaryType: "sum",
                        member: "Price"
                    },
                    {
                        formatter: "number",
                        label: "Sum Qty",
						sorttype: 'number',
                        width: 80,
                        align: "right",
                        aggregator: "sum",
                        summaryType: "sum",
                        member: "Quantity"
                    }
                ],
                yDimension: [
                    { "dataName": "Country" }
                ]
            },
            // grid options
            {
                width: 780,
                height: 200,
                rowNum: 10,
				rowList : ["10:10","20:20","30:30","1000:All"],
                pager: "#jqGridPager",
                caption: "Searching in Pivot"
            });
			setTimeout(function(){
				$("#jqGrid").navGrid("#jqGridPager", { search: true, add: false, edit: false, del: false, refresh: true });
			}, 500);
        });

    </script>

    <br />
    <span style="font-size: 12px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:800px;font-size:65%"></div>
    <script type="text/ecmascript" src="../../js/jquery-ui.min.js"></script>
    <script type="text/ecmascript" src="../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../css/prettify.css" />
    <script type="text/ecmascript" src="../../js/codetabs.js"></script>
    
    
    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>

</body>
</html>